<script setup></script>

<template>
  <div class="w-full">
    <div class="aboutwe-top">
      <div class="flex justify-center">
        <div class="mr-70px">
          <p class="text-size-46px font-semibold leading-68px text-white mt-181px">愿和每一位公寓管理者携手并进</p>
          <div class="text-size-24px font-normal text-white leading-38px mt-50px">致力于打造一套完整的公寓智慧资产管理平台，让公寓运营变得更简单、高效</div>
        </div>
        <img class="w-440px h-600px" src="/public/images/about/aboutwe.png" alt="字节牛公司介绍" />
      </div>
    </div>
    <div class="aboutweBox">
      <span class="aboutwe-tit">公司简介</span>
      <div class="flex w-1200px justify-between mt-84px mx-auto">
        <div class="flex-1 flex flex-col justify-between">
          <p class="introduction-p">字节牛（武汉）信息技术有限公司（简称:字节牛），致力于打造一套完整的公寓智慧资产管理平台。旗下拥有寓盟SAAS、寓盟管家等品牌。</p>
          <div class="introduction-p introduction-con" style="margin-top: 30px">
            字节牛，是国内领先智慧公寓资产管理SAAS平台，经过数千家公寓和多家头部地产集团品牌公寓的运营经验沉淀而来，通过高新技术结合分布式微服务架构搭建一套完整的公寓智慧资产管理平台，完善优化公寓资产管理的工作流程。用数字化赋能公寓运营，实现标准化流程作业，提高运营效率，真正做到降本提效。寓盟SAAS平台团队曾服务过多家地产公寓客户和当地知名公寓品牌，以深度帮助企业落地数字化办公和较好的服务体系被高度认可信赖。客户多为国内知名集团及头部民营企业，包括
            <span style="font-weight: 500">龙湖地产集团、中合集团、中粮集团、合景集团，中润置家，棉花公寓</span>等…
          </div>
          <div class="flex justify-between h-208px mt-30px">
            <img class="w-336px h-208px" src="/public/images/about/guanyuwomen01.jpg" alt="字节牛公司介绍" />
            <img class="w-336px h-208px" src="/public/images/about/guanyuwomen02.jpg" alt="字节牛公司介绍" />
          </div>
        </div>
        <div class="w-428px ml-20px">
          <img class="w-428px h-268px" src="/public/images/about/guanyuwomen04.jpg" alt="公寓管家介绍" />
          <img class="w-428px h-268px mt-20px" src="/public/images/about/guanyuwomen03.jpg" alt="公寓管家介绍" />
        </div>
      </div>
    </div>
    <div class="relative h-670px text-center bg-white mt-130px">
      <span class="aboutwe-tit">公司理念</span>
      <div class="flex w-1200px justify-between px-82px mx-auto py-82px">
        <div class="flex-1">
          <img class="w-282px h-282px" src="/public/images/about/jd.png" />
          <p class="text-size-24px leading-33px text-hex-333 mb-20px">简单</p>
          <p class="text-size-14px text-hex-333 leading-26px px-20px">复杂的留给我们，简单的留给客户，在保证产品的丰富性同时，降低客户使用门槛，节省企业人员学习成本，让企业管理变得更简单高效</p>
        </div>
        <div class="flex-1">
          <img class="w-282px h-282px" src="/public/images/about/kx.png" />
          <p class="text-size-24px leading-33px text-hex-333 mb-20px">可信</p>
          <p class="text-size-14px text-hex-333 leading-26px px-20px" style="padding: 0 46px">客户的数据安全隐私高于一切，做客户最信任的合作伙伴</p>
        </div>
        <div class="flex-1">
          <img class="w-282px h-282px" src="/public/images/about/kq.png" />
          <p class="text-size-24px leading-33px text-hex-333 mb-20px">可亲</p>
          <p class="text-size-14px text-hex-333 leading-26px px-20px">把最好的微笑留给客户，用真诚服务好每一位客户；多点理解，多点微笑，多点付出，才能多个朋友，多个伙伴</p>
        </div>
      </div>
    </div>
    <div class="relative w-full bg-hex-FAFBFD text-center pt-94px">
      <span class="aboutwe-tit">我们的价值</span>
      <div class="w-1200px mx-auto pt-102px">
        <div class="flex justify-between">
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/wsbz.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">完善标准</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">建立完善长租公寓管理标准</p>
            </div>
          </div>
          <div class="w-40px"></div>
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/yjjz.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">预警机制</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">工作数据预警机制，提前预知问题</p>
            </div>
          </div>
        </div>
        <div class="flex justify-between mt-20px">
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/gxgt.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">高效沟通</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">流程化管理，实现各部门高效沟通，且标准化流程作业</p>
            </div>
          </div>
          <div class="w-40px"></div>
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/kpi.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">KPI考核</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">科学制定企业年度目标及团队KPI考核，同时可实时查看完成情况</p>
            </div>
          </div>
        </div>

        <div class="flex justify-between mt-20px">
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/sjfx.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">数据分析</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">通过数据分析，获悉资产收益组成未来可增长点</p>
            </div>
          </div>
          <div class="w-40px"></div>
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/xsqy.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">线上签约</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">线上签约、财务管理、实时利润统计</p>
            </div>
          </div>
        </div>
        <div class="flex justify-between mt-20px">
          <div class="value-item">
            <img class="w-88px h-88px" src="/public/images/about/ydhbg.png" />
            <div class="ml-20px py-5px">
              <p class="text-size-20px font-medium text-hex-333">移动化办公</p>
              <p class="text-hex-333 leading-20px text-size-14px mt-10px">智能硬件，开启智能新时代、实现移动化办公</p>
            </div>
          </div>
          <div class="w-40px"></div>
          <div class="value-item opacity-0"></div>
        </div>
      </div>
    </div>
    <div class="h-100px"></div>
  </div>
</template>

<style scoped>
.aboutwe-top {
  padding-top: 50px;
  width: 100%;
  height: 600px;
  background: url(/public/images/about/aboutweBg.png);
  background-size: cover;
  text-align: center;
}

.aboutweBox {
  padding-top: 100px;
  position: relative;
  height: 796px;
  text-align: center;
  background: #ffffff;
}
.aboutwe-tit {
  position: relative;
  font-size: 40px;
  font-weight: 600;
  color: #000000;
  line-height: 56px;
}
.aboutwe-tit::before {
  content: '';
  position: absolute;
  width: 44px;
  height: 4px;
  background-color: #0a87f8;
  top: 76px;
  left: 60px;
}

.introduction-left {
  float: left;
  width: calc(100% - 450px);
}

.introduction-left img {
  width: 336px;
  height: 208px;
}

.introduction-p {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 30px;
}

.introduction-right {
  float: right;
  width: 428px;
}

.introduction-right img {
  width: 428px;
  height: 268px;
}

.value-item {
  display: flex;
  flex: 1;
  background-color: #ffffff;
  height: 150px;
  padding: 31px;
  box-shadow: 0px 2px 20px 0px rgba(0, 101, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 40px;
  text-align: left;
}
</style>
